<template>
	<div class="smallrole">
		<div class="role">
			<i class="el-icon-s-data">书城管理 ——</i>
			<span>一级类型</span>
		</div>
		<hr />

		<el-table :data="bigList">
			<el-table-column prop="id" label="一级类型id"></el-table-column>
			<el-table-column prop="prio" label="一级类型顺序"></el-table-column>
			<el-table-column prop="name" label="一级类型名称"></el-table-column>
			<el-table-column label="二级类型名称">
				<template slot-scope="scope">
					<el-table :data="scope.row.son">
						<el-table-column prop="prio"></el-table-column>
						<el-table-column prop="name"></el-table-column>
						<el-table-column>
							<template slot-scope="scope">
								<el-button style="border: none; color: white; background-color: #00BFFF;"><i
										class="el-icon-edit" @click="goUpdate(scope.row)"></i></el-button>
							</template>
						</el-table-column>
						<el-table-column>
							<el-button style="border: none; color: white; background-color:darkorange;"><i
									class="el-icon-close"></i></el-button>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column label="添加">
				<template slot-scope="scope">
					<el-button @click="add(scope.row)">添加</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>
</template>

<script>
	export default {
		name: 'typeTwo',
		data() {
			return {
				oneList: [],
				twoList: [],
				bigList: [],
				dialogVisible: false,
				twoType: {},
				n: '',
				p: ''
			}
		},
		methods: {
			goUpdate(c) {
				this.$router.push({
					path: '/bookbackend/updatetwo',
					query: {
						dx: c
					}
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			add(c) {
				this.$router.push({
					path: '/bookbackend/addtwo',
					query: {
						dx: c
					}
				});

			}
		},
		mounted() {
			this.$get("/api/adm/type/findAll2").then((resp) => {
				console.log(resp.data.data);
				let list = resp.data.data;
				console.log(list);
				list.forEach((item, i) => {
					console.log(item.prio);
					if (item.prio < 10000) {
						this.oneList.push(item);
					} else {
						this.twoList.push(item)
					}
				})

				console.log("一级类型:" + this.oneList);
				this.oneList.forEach((item) => {
					console.log(item.name);
					this.bigList.push(item);

				});
				console.log("====================================");
				this.bigList.forEach((item, i) => {
					console.log(item.id + item.name);
					item.son = [];
					this.twoList.forEach((itemm, i) => {
						if (item.id == itemm.pid) {
							item.son.push(itemm);
						}

					})
				})
				console.log("====================================");
				for (let i in this.bigList) {
					for (let j of this.bigList[i].son) {
						// console.log(this.bigList[i].son.[j].name);
						console.log(this.bigList[i].name + j.name);

					}
				}
			});

		}

	}
</script>

<style>
	.smallrole {
		width: 90%;
		margin-left: 2%;
	}
</style>